<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import blogFooter from '@/components/common/blogFooter.vue';
</script>

<template>
  <header>
      <nav class="wrapper">
        <RouterLink to="/" class="home">Home</RouterLink>
        <div style="width: 100px;"></div>
        <RouterLink to="/about" class="about">About</RouterLink>
      </nav>
  </header>

  <div style="height: 150px;"></div>
  <div style="margin: 30px;">
    <RouterView />
  </div>
  <div style="height: 150px;"></div>
  <div class="mb-4" style="display: flex;justify-content: center;">
    <el-button round>Round</el-button>
    <el-button type="primary" round>Primary</el-button>
    <el-button type="success" round>Success</el-button>
    <el-button type="info" round>Info</el-button>
    <el-button type="warning" round>Warning</el-button>
    <el-button type="danger" round>Danger</el-button>
  </div>
  
  <div style="height: 150px;"></div>
  <blogFooter />
</template>

<style scoped>
.home{
    font-size: 30px;
}
.about{
    font-size: 30px;
}
.wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (min-width: 1024px) {
  
}
</style>
